*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
body{
    background-color: #f6f6f6;
    &::after{
        line-height: 1rem;
        content: "发布";
        width: 1rem;
        height: 1rem;
        background-color: #ff5934;
        border-radius: 50%;
        right: .58rem;
        bottom: 3.07rem;
        position: fixed;
        text-align: center;
        font-size: 19px;
        color: white;
    }
}
header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: .96rem;
    width: 6.72rem;
    padding-left: .24rem;
    padding-right: .24rem;
    border-bottom: 1px solid #fbfbfb;
    aside{
        img{
            width: .52rem;
            height: .52rem;
        }
    }
    ul{
        display: flex;
        overflow:scroll;
        &::-webkit-scrollbar{
            display: none;
        }
        height: .77rem;
        width: 5.15rem;
        a{
            text-decoration: none;
            display: block;
            width: 1.58rem;
            height: .77rem;
            span{
                line-height: .77rem;
                position: relative;
                display: block;
                height: .77rem;
                font-size: .31rem;
                font-weight: 900;
                text-align: center;
                color: #999999;
                &::after{
                    content: "";
                    width: 20%;
                    height: .04rem;
                    bottom: 0px;
                    left: 35%;
                    position: absolute;
                    background-color: royalblue;
                    display: none;
                }
                &:hover::after{
                    display: block;
                }
                
                
                
            }
        }
    }
    div{
        img{
            width: .77rem;
            height: .77rem;
        }
    }  
}
article{
    height: 10.80rem;
    width: 6.72rem;
    padding:0 .24rem;
    overflow: scroll;
    >div{
        aside{
            padding-top: .19rem;
            padding-bottom: .19rem;
            display: flex;
            justify-content: space-between;
            align-items:center ;
            >div{
                height: .52rem;
                line-height: .52rem;
                display: flex;
                img{
                    width: .52rem;
                    height: .52rem;
                }
                span{
                    font-size: .25rem;
                    display: inline-block;
                    margin-left: .19rem;
                }
            }
        }
        h5{
            font-size: .27rem;
            padding-bottom: .19rem;
        }
        p{
            font-size: .25rem;
            padding-bottom: .19rem;
        }
        >img{
            width: 100%;
            height: 3.72rem;
            border-radius: 10px;
        }
        section{
            display: flex;
            align-items: center;
            height: .6rem;
            div{
                height: .6rem;
                background-color: #f6f6f6;
                margin-right: .19rem;
                margin-bottom: .38rem;
                display: flex;
                align-items: center;
                margin-bottom: .19rem;
                img{
                    width: .23rem;
                    height: .23rem;
                }
                span{
                    font-size: .25rem;
                }
            }
        }
        >div{
            width: 100%;
            height: .35rem;
            background-color: #f6f6f6;
            display: flex;
            padding: .1rem;
            border-radius: 10px;
            span{
                font-size: .25rem;
            }
        }
        ul{
            display: flex;
            justify-content: space-evenly;
            font-size: .29rem;
            color: #757575;
            li{
                a{
                    text-decoration: none;
                    color: #757575;
                }
                padding-top: .19rem;
                padding-bottom: .19rem;
                .icon-fenxiang,.icon-xiaoxi2,.icon-dianzan{
                    font-size: .38rem;
                }

            }
        }
    }
    
}
footer{
    height: 1rem;
    width: 7.2rem;
    position: fixed;
    background-color: white;
    bottom: 0px;
    left: 0px;
    ul{
        display: flex;
        align-items: center;
        
        li{
            margin-top: .19rem;
            width: 20%;
            font-size: .25rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            a{
                text-decoration: none;
                color: #999999;
            }
            &:nth-child(3) a{
                color: #de702a;
            }
        }
        img{
            width: .4rem;
            height: .4rem;
            
        }
    }
}